import { IconFont } from '@nutui/icons-react-taro'
import { Button } from '@nutui/nutui-react-taro'
import { ScrollView, Text, View } from '@tarojs/components'
import { useState } from 'react'
import { useRequest } from 'taro-hooks'
import Card from '../../components/card'
import FeeDetails from '../../components/fee-details'
import ImageGallery, { ImageItem } from '../../components/image-gallery'
import Layout from '../../components/layout'
import { QuotationCategory, THEME_COLORS } from '../../constants/index'
import { getProductInfo } from '../../services/product'
import './index.less'

interface PackageContentItem {
  icon: React.ReactNode
  title: string
  items?: string[]
  description?: string
}

const ProjectDetails: React.FC = () => {
  const { data, loading } = useRequest(getProductInfo, {
    defaultParams: ['1'],
  })

  const [selectedPackage, setSelectedPackage] = useState(data?.product?.default_package?.id || 0)

  const packageImages: ImageItem[] =
    data?.product?.images.map((img) => ({
      src: img,
    })) || []

  // 项目费用明细数据
  const projectFeeCategories: QuotationCategory[] = [
    {
      category: '设计与规划',
      items: [
        { name: '设计费', price: '¥8,000' },
        { name: '测量费', price: '¥2,000' },
        { name: '方案费', price: '¥2,000' },
      ],
      total: '¥12,000',
    },
    {
      category: '材料费',
      items: [
        { name: '橱柜材料', price: '¥35,000' },
        { name: '台面材料', price: '¥15,000' },
        { name: '电器设备', price: '¥20,000' },
        { name: '其他材料', price: '¥10,000' },
      ],
      total: '¥80,000',
    },
    {
      category: '人工费',
      items: [
        { name: '拆除费', price: '¥8,000' },
        { name: '安装费', price: '¥35,000' },
        { name: '水电改造', price: '¥12,000' },
        { name: '其他人工', price: '¥5,000' },
      ],
      total: '¥60,000',
    },
    {
      category: '其他费用',
      items: [{ name: '备用金', price: '¥15,000' }],
      total: '¥15,000',
    },
  ]

  const packageContent: PackageContentItem[] = [
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='kuaijiezhifu' size={20} />,
      title: '套餐内容 // TODO boss 配置 待确定',
      items: ['定制橱柜和石英台面', '节能型不锈钢器具', 'LED 照明和智能家居集成', '乙烯基地板和瓷砖后挡板'],
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='gerenzhongxin-zhihui' size={20} />,
      title: '工期预计',
      description: '项目将在4-6周内完成，确保对您日常生活的影响降到最低。',
    },
  ]

  return (
    <Layout
      title={data?.product?.product_name}
      showTabBar={false}
      loading={loading}
      footer={
        <View className='footer-buttons'>
          <Button type='primary' size='large' className='appointment-button'>
            一键预约
          </Button>
          <Button type='default' size='large' className='quote-button'>
            透明报价
          </Button>
        </View>
      }>
      {/* Main Content */}
      <ScrollView className='project-details-content' scrollY>
        {/* 图片展示区域 */}
        <ImageGallery images={packageImages} height={300} className='project-image-gallery' />

        {/* 项目标题和描述 */}
        <View className='project-info'>
          <Text className='project-title'>{data?.product?.product_name}</Text>
          <Text className='project-description'>{data?.product?.product_description}</Text>
        </View>

        {/* 套餐选择 */}
        <View className='package-selection'>
          <Text className='section-title'>套餐选择</Text>
          <View className='package-buttons'>
            {data?.product?.available_packages.map((_package) => (
              <Button
                key={_package?.id}
                type='primary'
                onClick={() => setSelectedPackage(_package?.id)}
                size='small'
                className={`package-button ${_package?.id === selectedPackage ? 'active' : ''}`}>
                {_package?.package_name}
              </Button>
            ))}
          </View>
        </View>

        {/* 详细信息 */}
        <View className='details-section'>
          {packageContent.map((section, index) => (
            <Card key={index} padding='md' className='detail-card'>
              <View className='detail-header'>
                <View className='detail-icon' style={{ backgroundColor: `${THEME_COLORS.primary}20` }}>
                  <Text className='icon-text' style={{ color: THEME_COLORS.primary }}>
                    {section.icon}
                  </Text>
                </View>
                <Text className='detail-title'>{section.title}</Text>
              </View>

              {section.items && (
                <View className='detail-list'>
                  {section.items.map((item, itemIndex) => (
                    <View key={itemIndex} className='list-item'>
                      <Text className='list-dot'>•</Text>
                      <Text className='list-text'>{item}</Text>
                    </View>
                  ))}
                </View>
              )}

              {section.description && <Text className='detail-description'>{section.description}</Text>}
            </Card>
          ))}
        </View>

        {/* 费用明细 */}
        <View className='details-section'>
          <Card padding='md' className='detail-card'>
            <View className='detail-header'>
              <View className='detail-icon' style={{ backgroundColor: `${THEME_COLORS.primary}20` }}>
                <Text className='icon-text' style={{ color: THEME_COLORS.primary }}>
                  <IconFont fontClassName='iconfont' classPrefix='icon' name='zhifudingjin' size={20} />
                </Text>
              </View>
              <Text className='detail-title'>项目费用明细</Text>
            </View>
            <View className='detail-description'>
              <FeeDetails
                categories={projectFeeCategories}
                totalAmount='¥167,000'
                title='项目费用明细'
                primaryColor={THEME_COLORS.primary}
                note='*此报价为估算价格，最终价格以实际测量和材料选择为准。'
              />
            </View>
          </Card>
        </View>
      </ScrollView>
    </Layout>
  )
}

export default ProjectDetails
